<template>
  <div class="about-bj">
    <div class="about-bjk"
         style="width: 100%;height: 100%;position:relative;background-color: rgba(251,185,140,0.53);backdrop-filter: blur(6px)">
      <div class="center-div">
        <img src="https://test01-1324045941.cos.ap-beijing.myqcloud.com/test/d36c85c5-f674-4e9a-a8ad-e0f48d50f45e.png" alt="" style="height: 70px;width: 70px"> <span
        class="about-span">兴趣爱好</span>
        <img src="https://test01-1324045941.cos.ap-beijing.myqcloud.com/test/d36c85c5-f674-4e9a-a8ad-e0f48d50f45e.png" alt="" style="height: 70px;width: 70px; margin-left: 1%">
      </div>
      <div class="center-div1">
        <div style="margin-left: 200px;height: 600px;width: 1200px;display: flex;
    flex-wrap: wrap;justify-content: center;
    align-content: flex-start;">
          <div class="column" v-for="(image, index) in images" :key="index">
            <img :src="image.src" :alt="image.alt" onmouseover="this.style.cursor='pointer'"
                 onmouseout="this.style.cursor='auto'"
                 style="height: 100px;width: 100px;border-radius: 8px;margin-top: 5px;"
                 @click="wzry(image.id,image.name)"/>
            <p class="p">{{ image.name }}</p>
          </div>
        </div>
        <div class="div2">
          <p v-for="item in xh" :key="item.id" @click="shanchu(item.id,item.name)"
             style="cursor: pointer;font-size: 25px;color: #040404;padding: 10px">
            {{ item.name }}
          </p>
        </div>
        <el-button type="warning" style="height: 50px;width: 120px;margin-top:30px;margin-left: 70px" @click="finish"
                   v-loading.fullscreen.lock="fullscreenLoading">
          <span style="font-size: 21px">完成</span></el-button>
      </div>
    </div>
  </div>
</template>
<script>

import axios from 'axios'
import Cookies from 'js-cookie'

export default {
  data () {
    return {
      loginUser: {},
      images: [
        {
          id: 1,
          src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.orl2ANXnXWlBJ9Kmz9-NQQHaHa?rs=1&pid=ImgDetMain',
          alt: '描述1',
          name: '王者荣耀'
        },
        {
          id: 2,
          src: 'https://img0.baidu.com/it/u=1198019525,3962047132&fm=253&fmt=auto&app=138&f=PNG?w=182&h=182',
          alt: '描述2',
          name: '永杰无间'
        },
        {
          id: 3,
          src: 'https://img1.baidu.com/it/u=776041653,4145761871&fm=253&fmt=auto&app=138&f=PNG?w=243&h=243',
          alt: '描述3',
          name: '和平精英'
        },
        {
          id: 4,
          src: 'https://img2.baidu.com/it/u=3265136240,2117388993&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          alt: '描述3',
          name: '决战平安京'
        },
        {
          id: 5,
          src: 'https://img0.baidu.com/it/u=4170121870,2546745817&fm=253&fmt=auto&app=138&f=PNG?w=182&h=182',
          alt: '描述3',
          name: '蛋仔派对'
        },
        {
          id: 6,
          src: 'https://img0.baidu.com/it/u=3110671790,975176726&fm=253&fmt=auto&app=138&f=JPEG?w=492&h=492',
          alt: '描述3',
          name: '光遇'
        },
        {
          id: 7,
          src: 'https://img2.baidu.com/it/u=3060998169,940556171&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1711558800&t=2184779fb8d16fa0dd81d88670bdb0fc',
          alt: '描述3',
          name: '金铲铲之战'
        },
        {
          id: 8,
          src: 'https://img2.baidu.com/it/u=1034230227,3964592880&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
          alt: '描述3',
          name: '小说'
        },
        {
          id: 9,
          src: 'https://img0.baidu.com/it/u=412083601,602256431&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          alt: '描述3',
          name: '动漫'
        },
        {
          id: 10,
          src: 'https://img1.baidu.com/it/u=3205206723,1324066176&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888',
          alt: '描述3',
          name: '电视剧'
        },
        {
          id: 11,
          src: 'https://img2.baidu.com/it/u=2927856275,3850698084&fm=253&fmt=auto&app=138&f=JPEG?w=325&h=270',
          alt: '描述3',
          name: '短视频'
        },
        {
          id: 12,
          src: 'https://wkyx520.com/uploads/20220812/cb184b08ea631be24eca09a77ed23790.png',
          alt: '描述3',
          name: '代号鸢'
        },
        {
          id: 13,
          src: 'https://img2.baidu.com/it/u=484042769,4207141710&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500',
          alt: '描述3',
          name: '音乐'
        },
        {
          id: 14,
          src: 'https://img0.baidu.com/it/u=2976191612,202015650&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          alt: '描述3',
          name: '聊天'
        },
        {
          id: 15,
          src: 'https://img0.baidu.com/it/u=494019916,4022817509&fm=253&fmt=auto&app=138&f=JPEG?w=438&h=500',
          alt: '描述3',
          name: '配音'
        },
        {
          id: 16,
          src: 'https://img0.baidu.com/it/u=4181854346,3094659711&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500',
          alt: '描述3',
          name: '唱歌'
        },
        {
          id: 17,
          src: 'https://img0.baidu.com/it/u=1952927254,1182784485&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
          alt: '描述3',
          name: '二次元'
        },
        {
          id: 18,
          src: 'https://img2.baidu.com/it/u=1947536359,2733086433&fm=253&fmt=auto&app=138&f=JPEG?w=441&h=444',
          alt: '描述3',
          name: '吃瓜'
        },
        {
          id: 19,
          src: 'https://img1.baidu.com/it/u=1472316364,1696937678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
          alt: '描述3',
          name: '美食'
        },
        {
          id: 20,
          src: 'https://img1.baidu.com/it/u=1095933062,3528698511&fm=253&fmt=auto&app=138&f=JPEG?w=694&h=500',
          alt: '描述3',
          name: '运动'
        },
        {
          id: 21,
          src: 'https://img2.baidu.com/it/u=1831643940,2853464775&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888',
          alt: '描述3',
          name: '生活'
        }
      ],
      xh: [],
      userList: [
        {
          username: this.$route.params.uName,
          provincial: this.$route.params.uIdentity,
          age: this.$route.params.uAge,
          sex: this.$route.params.uSex,
          phonee: this.$route.params.uPhone,
          selectedOptionAddress: this.$route.params.uAddress,
          imageUrl: this.$route.params.uphoto,
          imgType: this.$route.params.imgType
        }
      ],
      uuuuu: [sessionStorage.getItem('user')],
      fullscreenLoading: false
    }
  },
  methods: {
    wzry (id, name) {
      const index = this.xh.findIndex(image => image.id === id)
      if (index === -1) {
        const ah = {
          id: id,
          name: name
        }
        this.xh.push(ah)
        this.$notify.success('您添加了' + name)
      } else {
        this.$notify.error('您已添加' + name)
      }
    },
    shanchu (id, name) {
      this.xh = this.xh.filter((o) => {
        return o.id !== id
      })
      this.$notify.info('您已取消添加' + name)
      console.log(this.xh)
    },
    finish () {
      if (this.xh.length < 2) {
        this.$notify.error('您至少添加两个兴趣爱好')
      } else {
        // eslint-disable-next-line no-unused-vars
        let xhName = ''
        this.xh.forEach((item) => {
          xhName += item.name + ','
        })
        console.log(xhName)
        const data = {
          uName: this.userList[0].username,
          uIdentity: this.userList[0].provincial,
          uAge: this.userList[0].age,
          uSex: this.userList[0].sex,
          uPhone: this.userList[0].phonee,
          uAddress: this.userList[0].selectedOptionAddress,
          uphoto: this.userList[0].imageUrl,
          uhobby: xhName
        }
        if (this.$route.params.imgType === '') {
          this.userList[0].imgType = 'jpg'
        }
        const loading = this.$loading({
          lock: true,
          text: '正在注册请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        axios.defaults.withCredentials = true
        axios({
          method: 'post',
          url: 'http://152.136.143.223:9091/login/register/' + this.userList[0].imgType,
          headers: { 'Content-Type': 'application/json;charset=UTF-8' },
          withCredentials: true,
          data: (data)
        }).then((res) => {
          setTimeout(() => {
            loading.close()
            this.$notify.success('注册成功')
            axios.defaults.withCredentials = true
            axios({
              method: 'post',
              url: 'http://152.136.143.223:9091/login/session/' + this.userList[0].phonee
            })
              .then((res) => {
                this.loginUser = res.data
                Cookies.set('use', JSON.stringify(this.loginUser))
                sessionStorage.setItem('user', JSON.stringify(res.data))
                this.$router.push({
                  path: '/home'
                })
              })
          }, 3000)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.about-bj {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;

  .center-div {
    position: absolute; /* 或者使用 flex 布局的 container 也可以 */
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%); /* 用于偏移图片和文本相对于容器的50%位置 */
    text-align: center; /* 如有文字，确保文字水平居中 */
    height: 30px; /* 设置容器高度 */
    width: 100%; /* 设置容器宽度，可以根据需要设置为百分比或其他值 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .center-div1 {
    position: absolute;
    top: 130px;
    height: 100%;
    //background-color: #3218a3;
    width: 100%;
  }

  .about-span {
    line-height: 24px;
    font-weight: 600;
    -webkit-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    transform: skew(-10deg);
    white-space: nowrap;
    font-size: 55px;
    color: #ffffff;
    margin-left: 1%
  }

  .column {
    //background-color: #a21a1a;
    width: 150px;
    height: 150px;
    margin: 8px;
    text-align: center;
    margin-top: 30px;
  }

  .img {
    margin-top: 13px;
    border-radius: 13px;
  }

  .p {
    margin-top: 3px;
    color: #151414;
    font-size: 20px;
  }

  .div2 {
    height: 400px;
    width: 150px;
    //background-color: #5151d7;
    margin-top: -550px;
    margin-left: 45px;
    overflow: auto; /* 添加滚动条 */
    border: 2px solid #635555;
    text-align: center;
    padding: 10px;
  }
}
</style>
